<template>
  <div>
    <div class="top">
      <img src="../assets/images/login.png" alt="" />
    </div>
    <div class="center">
      <van-form>
        <van-field
          v-model="form.mobile"
          name=""
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          name=""
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-form>
      <div style="color: #999; font-size: 20px" class="alert">
        <p>找回密码</p>
        <p @click="$router.push('/smslogin')">注册/验证码登录</p>
      </div>
      <button class="btn" @click="Login">登录</button>
    </div>
  </div>
</template>
<script setup>
const reg =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
import { goLogin } from "../tool/login";
import { Field } from "vant";
import { ref, reactive } from "vue";
import { Toast } from "vant";
import {useRouter} from 'vue-router'
const {push} =useRouter()
const form = reactive({
  mobile: "",
  password: "",
  type: 1,
  client: 1,
})

// 登录
const Login = async () => {
  
  let res = await goLogin(form);
  console.log(res);
  if (res.code == 200) {
    localStorage.setItem("LoginToken", res.data.remember_token);
    push('/')
  } else {
    Toast(res.msg);
  }
}
</script>
<style lang="scss" scoped>
.top {
  text-align: center;
  img {
    width: 525px;
    height: 115px;
    margin: 80px auto;
  }
}
.center {
  padding: 0 80px;
  form {
    p {
      display: flex;
      justify-content: space-between;
      line-height: 1.33rem;
      font-size: 0.373rem;
      input {
        border: none;
      }
      .code {
        color: #ef8236;
      }
    }
  }
  .alert {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
  }
  .btn {
    width: 100%;
    height: 65px;
    line-height: 65px;
    color: white;
    background-color: #fd6613;
    text-align: center;
    border-radius: 50px;
    font-size: 20px;
    margin-top: 50px;
    border: none;
  }
}

.active {
  border-bottom: 1px solid #ef8236;
}
</style>